 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf8"></meta>
<meta name="author" content="chenhao"></meta>
<meta name="Description" content="这是一个html的练习">
<meta name="website" content="http://www.baidu.com">
<meta name="keywords" content="练习，it 行业，外包">
	<title>表单控件的访问</title>
<script type="text/javascript">
   function create() {
    var ulElement=document.getElementById('city');
         // createElement(tag)创建一个元素,tag:一个有效的标签
     var liElement=document.createElement("li");
     liElement.innerHTML="南京";
     // appendChild在末尾添加一个子节点
     ulElement.appendChild(liElement);
   }

   function insert() {
       var ulElement=document.getElementById('city');
       var liElement=document.createElement("li");
       liElement.innerHTML="南京";
       //insertBefore()插入一个元素:要插入的元素，哪个元素之前
       ulElement.insertBefore(liElement,ulElement.firstChild.nextSibling);
   }

   function replace() {
    var ulElement=document.getElementById('city');
    var liElement=document.createElement("li");
    liElement.innerHTML="武汉";
    ulElement.replaceChild(liElement,ulElement.childNodes[0]);
   }

   function copy() {
     var ulElement=document.getElementById('city');
     // cloneNode复制一个元素 true：复制子元素 false：不复制子元素
     var newUl=ulElement.cloneNode(true);
     var bodyElement=document.getElementById("body");
     bodyElement.appendChild(newUl);
   }
   
   function deleted() {
      var ulElement=document.getElementById('city');
      ulElement.removeChild(ulElement.childNodes[2]);

   }
   
   function createSelect() {
     var select=document.createElement("select");
      var bodyElement=document.getElementById("body");
     for (var i = 0; i < 10; i++) {
      var selected=false;
          if (i==3) {
          selected=true;
          }
          // createElement并不是对所有的浏览器都支持,给选择元素添加子option元素有通用的构造方法:new Option(显示的文本,对应的值，默认是否显示,是否选择)
         var optionElement=new Option("新增"+i,i,true,selected);
         select.options[i]=optionElement;

      }
      select.size=4;
      select.id="newSelect";

      bodyElement.appendChild(select);
   }

  function deletedOption() {  
     var select=document.getElementById("newSelect");
     if (select.options.length>0) {
        // select.remove(select.options.length-1);
        select.options[select.options.length-1]=null;
     }
  }

  function deleteAll() {
     var select=document.getElementById("newSelect");
          if (select.options.length>0) {
            //删除所有，其他数组是否也可以这样尚不清楚
      select.length=0;
      }

  }
</script>

</head>
<body id="body">
 
  <ul id="city">
    <li>北京</li>
    <li>上海</li>
  </ul>

  <input type="button" onclick="create()" value="创建，末尾增加一个节点"></input>
  <input type="button" onclick="insert()" value="插入"></input>
  <input type="button" onclick="replace()" value="替换"></input>
  <input type="button" onclick="copy()" value="复制"></input>
  <input type="button" onclick="deleted()" value="删除子元素"></input><br/>
  <input type="button" onclick="createSelect()" value="创建select"></input><br/>
  <input type="button" onclick="deletedOption()" value="删除select的选项"></input>
  <input type="button" onclick="deleteAll()" value="删除所有"></input>











</body>
</html>
